<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>学生列表</title>
    <style>
        .container {
            width: 800px;
            margin: auto;
        }

        .container > h1 {
            text-align: center;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        table, td, th {
            border: 1px solid black;
        }

        tr {
            height: 36px;
        }

        tr td:nth-child(1) {
            text-align: center;
        }

        .pager {
            text-align: center;
            padding: 10px 0;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>学生数据列表</h1>
    <p>
        <a th:href="@{/page/stuAdd}">新增学生</a> &emsp;
        <a href="javascript:removeBatch();">批量删除</a>
    </p>
    <!--借助form表单实现同步批量删除-->
    <form th:action="@{/student/remove}" method="GET" id="removeForm">
        <table>
            <thead>
            <tr>
                <th><input type="checkbox"></th>
                <th>学生姓名</th>
                <th>学生性别</th>
                <th>院系/专业</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody th:if="${#lists.isEmpty(pageInfo.list)}">
                <tr>
                    <td colspan="5">学生的集合是空的!!!</td>
                </tr>
            </tbody>

            <!--
                集合不为空，遍历展示数据
            -->
            <tbody th:unless="${#lists.isEmpty(pageInfo.list)}">
                <tr th:each="student : ${pageInfo.list}">
                    <td><input type="checkbox" name="ids" th:value="${student.id}"></td>
                    <td th:text="${student.name}"></td>
                    <td th:text="${student.gender == '1'?'男':'女'}"></td>
                    <td th:text="${student.major}"></td>
                    <td>
                        <a th:href="@{'/student/find/'+${student.id}}">修改</a> &emsp;
                        <a th:href="@{'/student/remove/'+${student.id}}" onclick="return confirm('确定要删除该条数据吗?')">删除</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </form>
    <div class="pager">
        当前页/总页数: <span th:text="${pageInfo.pageNum}+'/'+${pageInfo.pages}"></span>
        <span th:if="${pageInfo.hasPreviousPage}">
            <a th:href="@{/student/find(pageNum=${pageInfo.prePage})}">上一页</a>
        </span>
        <span th:each="p,count : ${pageInfo.pages}">
            <a th:if="${pageInfo.pageNum != p}" th:href="@{/student/find(pageNum=${p})}" th:text="'【' + ${p} + '】'"></a>
            <a th:if="${pageInfo.pageNum == p}" th:text="'【' + ${p} + '】'"></a>
        </span>
        <span th:if="${pageInfo.hasNextPage}">
            <a th:href="@{/student/find(pageNum=${pageInfo.nextPage})}">下一页</a>
        </span>
    </div>
</div>

<script type="text/javascript" th:src="@{/static/js/jquery-3.3.1.min.js}"></script>
<script type="text/javascript">
    function removeBatch() {
        console.log($)

        if ($(":checkbox:checked").length > 0) {
            if (confirm("确定要删除数据吗?")) {
                $("#removeForm").get(0).submit();
            }
        } else {
            alert("请选择要删除的学生!")
        }
    }
</script>
</body>
</html>